import React, { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';


type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
    { label: "栏目一", key: "/page1", icon: <PieChartOutlined /> },
    { label: "栏目2", key: "/page2", icon: <PieChartOutlined /> },
    {
        label: "栏目3", key: "/page3", icon: <PieChartOutlined />,
        children: [
            { label: "栏目2-1", key: "/page31", icon: <PieChartOutlined /> },
            { label: "栏目2-2", key: "/page32", icon: <PieChartOutlined /> },
        ]
    },
    { label: "栏目4", key: "/page4", icon: <PieChartOutlined /> },
]

const Comp: React.FC = () => {
    const currentRoute = useLocation()
    // currentRoute.pathname //当前url 路径
    const navigateTo = useNavigate()
    /**
     * @name: 左侧点击时间
     * @msg: 
     * @param {any} e
     * @return {*}
     */
    const menuClick = (e: any) => {
        console.log('e', e)
        navigateTo(e.key)
    }
    let firstOpenKey: string = ''
    for (let i = 0; i < items.length; i++) {
        if (items[i].children && items[i].children.length > 0) {
            if (items[i]['children'].find(j => j.key == currentRoute.pathname)) {
                firstOpenKey = items[i]['key']
                break
            }
        }

    }
    //设置展开项的初始值
    const [openKeys, setOpenKeys] = useState([''])

    const handleOpenChange = (keys: string[]) => {
        setOpenKeys([keys[keys.length - 1]])
    }
    return (
        <Menu
            theme="dark"
            defaultSelectedKeys={[currentRoute.pathname]}
            mode="inline" items={items}
            onClick={menuClick}
            onOpenChange={handleOpenChange}
            openKeys={openKeys}
        />
    );
};

export default Comp;